<template>
  <div class="search">
  <el-card>
    <el-form :model="searchForm" inline :label-width="70" class="search-form">
      <el-form-item label="用户昵称" prop="userName">
        <el-input type="text" v-model="searchForm.userName" clearable placeholder="请输入昵称" style="width: 160px" />
      </el-form-item>
      <el-form-item label="账户名" prop="account">
        <el-input type="text" v-model="searchForm.account" clearable placeholder="请输入账户名" style="width: 160px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
  <el-table :data="tableData" style="width: 100%;" >
    <el-table-column fixed prop="id" label="用户id" width="150" />
    <el-table-column prop="userName" label="昵称" width="120" />
    <el-table-column prop="account" label="账户名" width="120" />
    <el-table-column prop="gender" label="性别" width="120">
      <template #default="scope">{{ scope.row.gender === '0' ? '男' : '女' }}</template>
    </el-table-column>
    <el-table-column prop="birthday" label="生日" width="120" />
    <el-table-column prop="mail" label="邮箱" width="180" />
    <el-table-column prop="phone" label="电话" width="120" />
    <el-table-column prop="avatar" label="图片" width="120" >
      <!-- 图片的显示 -->
      <template #default="scope">
        <el-image :src="scope.row.avatar" style="min-width: 35px;height: 35px"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="provinceCode" label="省份编码" width="120" />
    <el-table-column prop="cityCode" label="城市编码" width="120" />
    <el-table-column prop="userPower" label="用户权限" width="120">
      <template #default="scope">{{ scope.row.userPower === '0' ? '普通用户' : '管理员' }}</template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="180" />
    <el-table-column prop="isBan" label="是否被禁用" width="180" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row)"
        >{{scope.row.isBan === 0?'禁封':'解禁'}}</el-button>
        <el-button link type="primary" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
   <pagination :total="total" @pagination="getPage" :limit="pageSize"></pagination>
  </el-card>
  </div>
</template>

<script  setup>
import {onMounted, reactive, ref} from "vue";
import Pagination from "@/components/Pagination/index.vue";
import {beanUserAPI, getUserAPI} from "@/api/userManage.js";
import { ElMessage } from "element-plus";
import 'element-plus/theme-chalk/el-message.css'
const current = ref(1)
const pageSize = ref(10)
const total = ref(100)
const tableData = ref([
  {
    id: '',
    userName: '',
    account: '',
    gender: '',
    birthday: '',
    mail:'',
    phone:'',
    avatar:'',
    provinceCode:'',
    cityCode:'',
    userPower:'',
    isBan:'',
    createTime:''
  }
])
const searchForm = reactive({
  userName:null,
  account:null,
})
const getUser = async () => {
  const res = await getUserAPI({current:current.value,pageSize:pageSize.value});
  tableData.value = res.data.records
  total.value = res.data.total
  console.log(tableData.value)
}
onMounted(() => getUser())
const getPage = (params) => {
  current.value = params.page
  pageSize.value = params.limit
  getUser()
}

const onSubmit = async ()=>{
  const account = searchForm.account
  const userName = searchForm.userName
  const params = ref({
    account:account,
    userName:userName,
    current:current.value,
    pageSize:pageSize.value
  })
  const res = await getUserAPI(params.value);
  tableData.value = res.data.records
  total.value = res.data.total
}

const handleClick = async (row) => {
  const params = {id:row.id}
  const res = await beanUserAPI(params)
  if(res.data){
    await getUser()
    ElMessage.success("更新成功")
  }
}



</script>


<style>
.search {
  .oss-operation {
    margin-bottom: 2vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    button {
      margin-right: 5px;
    }
  }
}
</style>